<template>
	<view class="tabbar">
		<view v-for="(item, index) in tabbarList" :key="index" :class="index===2?'tabbar-item-center':'tabbar-item'"
			@click="switchTab(item.pagePath)">
			<image :src="index === currentIndex?item.selectedIconPath:item.iconPath" mode="heightFix"
				class="tabbar-icon">
			</image>
			<text :class="{active: index === currentIndex}" v-if="index!==2">{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "custom-tab-bar",
		props: ['currentIndex'],
		data() {
			return {
				tabbarList: [{
						"pagePath": "pages/index/index",
						"iconPath": "/static/tabbar/index.png",
						"selectedIconPath": "/static/tabbar/index-a.png",
						"text": "上上签"
					}, {
						"pagePath": "pages/chouCircle/chouCircle",
						"iconPath": "/static/tabbar/chou.png",
						"selectedIconPath": "/static/tabbar/chou-a.png",
						"text": "抽圈"
					},
					{
						"pagePath": "pages/middle/middle",
						"iconPath": "/static/tabbar/middle.png",
						"selectedIconPath": "/static/tabbar/middle-a.png",
						"text": ""
					},
					{
						"pagePath": "pages/data/data",
						"iconPath": "/static/tabbar/data.png",
						"selectedIconPath": "/static/tabbar/data-a.png",
						"text": "数据"
					},
					{
						"pagePath": "pages/my/my",
						"iconPath": "/static/tabbar/my.png",
						"selectedIconPath": "/static/tabbar/my-a.png",
						"text": "我的"
					}
				],

			}
		},
		methods: {
			switchTab(path) {
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				let currentUrl = currentPage.route;
				if (currentUrl === path) return
				uni.switchTab({
					url: '/' + path
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 107px;
		opacity: 1;

		background: #FFFFFF;

		box-shadow: 0px 0px 20px 0px rgba(202, 156, 140, 0.2);
	}

	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;

		text {
			padding: 5px;
			font-size: 14px;
			color: #000;
		}

		text.active {
			color: #F16C40;
		}

		.tabbar-icon {
			width: 25px;
			height: 21px;
		}


	}

	.tabbar-item-center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		position: relative;

		.tabbar-icon {
			width: 61px;
			height: 61px;
		}


	}
</style>